<template>
  <div>
    <nut-navbar fixed>
      <template #left>
        <div h-full flex flex-a-c>
          <nut-icon @click="back()" custom-color="#333" name="rect-left"></nut-icon>
          <!-- <nut-icon ml-10rpx @click="bubbleData.toggle = true" color="#333" name="horizontal-n"></nut-icon> -->
        </div>
      </template>
      <template #content>
        <div v-if="props.scroll > 200">
          <nut-tabs type="smile" background="#fff" v-model="tab">
            <nut-tab-pane title="商品" pane-key="goods" />
            <nut-tab-pane title="评价" pane-key="comment" />
            <nut-tab-pane title="详情" pane-key="intro" />
            <nut-tab-pane title="推荐" pane-key="recommend" />
          </nut-tabs>
        </div>
      </template>
      <template #right>
      </template>
    </nut-navbar>

    <bubble v-model="bubbleData.toggle" @tapPopup="handleNavbarList" :popData="bubbleData.bubbleList"
      :x="bubbleData.navbarListX" :y="bubbleData.navbarListY" placement="top-start">123123123</bubble>
  </div>
</template>

<script setup lang="ts">
import bubble from '@/components/bubble/index.vue'
const emit = defineEmits(['click', 'init'])
const props = defineProps<{
  scroll: number
}>()
const bubbleData = ref<any>({
  toggle: false,
  // #ifdef H5
  navbarListX: 110, //导航栏列表栏x轴
  navbarListY: 80, //导航栏列表栏y轴
  // #endif
  // #ifdef MP-WEIXIN
  navbarListX: 100, //导航栏列表栏x轴
  navbarListY: 140, //导航栏列表栏y轴
  // #endif
  // #ifdef APP-PLUS
  navbarListX: 120, //导航栏列表栏x轴
  navbarListY: 170, //导航栏列表栏y轴
  // #endif
  bubbleList: [
    //导航栏列表栏数据
    {
      title: "首页",
      icon: "home-fill",
      ___type: "other",
    },
    {
      title: "购物车",
      icon: "bag-fill",
      ___type: "other",
    },
    {
      title: "搜索",
      icon: "search",
      ___type: "category",
    },
    {
      title: "个人中心",
      icon: "account-fill",
      ___type: "other",
    },
  ]
})

function handleNavbarList() {

}
const tab = ref<string>('goods')
watch(() => tab.value, (val) => {
  if (val) {
    emit('click', val)
  }
})



function back() {
  const pages = getCurrentPages();
  if (pages.length === 1) {
    uni.reLaunch({
      url: '/pages/mall'
    });
  } else {
    uni.navigateBack();
  }
}

onMounted(() => {
  emit('init')
})



</script>

<style scoped lang="scss">
:deep(.nut-icon-joy-smile) {
  left: 0 !important;
}
</style>
